<template>
	<view class="container">
		
		<!-- 顶部导航 -->
		<view class="fixHeader flex-y-center" :style="{paddingTop: StatusBar+'px'}">
		  <view class="leftbtn" @click="goBack()">
		    <image :src="$util.img('/image/header_left.png')" mode="widthFix" style="width: 60rpx;"></image>
		  </view>
		</view>
		<!-- 图片轮播——带右下角数量显示 -->
		<view class="advertisement">
		  <swiper :autoplay="false" :interval="3000" :duration="1000" :circular="true" indicator-active-color="#00D075" indicator-color="#EDEEF0" :indicator-dots="true">
		    <swiper-item v-for="(item,index) in piclist" :key="index" @click="previewMedia(index)">
		      <image :src="$util.img(item)" mode="aspectFill" lazy-load></image>
		    </swiper-item>
		  </swiper>
		</view>
		
		<view class="goodsInfo fill-base m-b-20">
			<view class="flex-between" >
			  <view class="font-52 c-origin flex-y-baseline text-bold" v-if="parseFloat(goodsDetail.price) > 0">
			    <text class="font-24">¥</text>{{goodsDetail.price}}
			  </view>
			  <view class="c-origin text-bold" v-else>
				免费
			 </view>
			</view>
		  <view class="font-32 name">{{goodsDetail.goods_name}}</view>  
		</view>
		
		<view class="fill-base goodsInfo m-b-20" >
			<view class="font-32 text-bold">购买须知</view>
			<view class="c-78"> 
				{{goodsDetail.buy_notice}}
			</view>
		</view>
		
		<view class="fill-base goodsInfo">
			<view class="font-32 text-bold m-b-24">商品详情</view>
			<view class="goods-details" v-if="goodsDetail.goods_content">
				<rich-text :nodes="goodsDetail.goods_content"  :data-nodes="goodsDetail.goods_content"></rich-text>
			</view>
		</view>
		
		<view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
			<view class="submit" @click="makeApoint()">立即购买</view>
		</view>
		<!-- <sign :show="showSign" @close="closePop" :price="goodsDetail.price" :memberPrice="goodsDetail.member_price" :backUrl="backUrl" :goodsid="id" v-if="showSign" :moduleType="moduleType" pageType="goods" ref="signDetail"></sign> -->

		<!-- 登录 -->
		<login-pop ref="loginDialog"></login-pop>

	</view>
</template>

<script>
	import sign from '../../components/sign/sign.vue'
	import htmlParser from '@/common/js/html-parser';
	export default {
		components: {
			sign
		},
		data() {
			return {
				StatusBar: getApp().globalData.StatusBar,
				piclist: [],
				isIphoneX: false, //判断手机是否是iphoneX以上
				goodsDetail: {},
				id: '',
				showSign: false,
				activityType: '',   //活动类型  course儿童成长模块
				moduleType: 'social', //social代表文娱社交
				backUrl: '/otherpages/social/goodsDetail'
			}
		},
		onLoad(data) {
			//   登录校验
		  	if (!uni.getStorageSync('token')) this.$refs.loginDialog.open();
		  this.isIphoneX = this.$util.uniappIsIPhoneX()
		  this.id = data.id;
		  if(data.activityType){
			   this.activityType = data.activityType;
			   if(this.activityType == 'course') this.moduleType = "";
		  }
		  this.getDetail();
		},
		onShow() {
			// if(this.$refs.signDetail) this.$refs.signDetail.getDefaultAddress()
		},
		methods: {
			previewMedia(index) {
				var paths = [];
				for (let i = 0; i < this.piclist.length; i++) {
					paths.push(this.$util.img(this.piclist[i]));
				}
				uni.previewImage({
					current: index,
					urls: paths,
				});
			},
			makeApoint() {
				if(!uni.getStorageSync('token')) {
					this.$util.showToast({title: '请先登录'})
					return
				}
				// this.showSign = true
				let params = {
					price: this.goodsDetail.price,
					memberPrice: this.goodsDetail.member_price,
					goodsid: this.id,
					moduleType: this.moduleType,
					pageType: 'goods'
				}
				this.$util.redirectTo('/otherpages/serviceSign/serviceSign?params=' + JSON.stringify(params))
			},
			closePop() {
				this.showSign = false;
			},
			goBack() {
				// 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				}else {
					this.$util.redirectTo('/pages/index/index')
				}
			},
			getDetail() {
				this.$api.sendRequest({
			      url: "/api/socialize/goodsinfo",
			      data: {
			        goods_id: this.id,
			      },
			      success: res => {
			        if(res.code == 0) {
			         this.goodsDetail = res.data;
					 	// 如果商品图片存在且为多张的情况下，取第一张图片作为封面图，已逗号拆分字符串，第一张图片做为封面图
						if(this.goodsDetail.goods_image) {
							var images = this.goodsDetail.goods_image.split(',')
							this.piclist = images
						}
					
					 // 商品详情
					if (this.goodsDetail.goods_content) this.goodsDetail.goods_content = htmlParser(this.goodsDetail.goods_content);

					 uni.setNavigationBarTitle({
						title: this.goodsDetail.goods_name
					 })
			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 160rpx;
}
.fixHeader {
  position:fixed;
  top:0;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
  .leftbtn {
    padding-left: 30rpx;
    // padding-top: 10rpx;
	margin-right: 30rpx;
	width: 60rpx;
	height: 60rpx;
  }
}
// 轮播图
.advertisement {
  position: relative;
  width: 750rpx;
  height: 750rpx;
  /deep/ swiper {
    height: 750rpx;
  }
  image {
    margin: 0 auto;
    width: 750rpx;
    height: 750rpx;
  }
}
.goodsInfo {
  padding: 30rpx 24rpx 20rpx;
  .name {
    line-height: 1.4;
  }
}


</style>
